import React, { useEffect, useState, useReducer } from 'react';
import { Upload, Button, message, Progress } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { connect } from 'dva';
const theProps = (state) => {
  return {
    updataId: state.sample.updataId,
    samplemaps: state.sample.samplemaps
  }
}


function Updata(props) {
  const { dispatch, updataId, samplemaps } = props;
  const [progress, setProgress] = useState(0)
  const prop = {
    action: 'http://10.89.101.39:9000/shale_porosity/upload/Maps',
    //action: 'http://192.168.1.106:9000/shale_porosity/upload/Maps',
    name: "files",
    maxCount: 1,
    onChange(info) {
      let hide
      if (info.file.status !== 'done' && info.file.percent == 100 &&info.file.status!=='removed') {
        hide = message.loading('文件上传完成，等待解压', 0)
      }
      if (info.file.status !== 'uploading') {
        setProgress(info.event ? info.event.percent : 100)
      }
      if (info.file.status === 'done') {
        message.destroy()
        message.success(`${info.file.name} 文件上传成功`);
        dispatch({
          type: 'sample/remainSamplemaps',
          payload: {
            path: info.file.response.url,
            sampleId: updataId,
            name: info.file.name
          }
        })
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
  };
  return (
    <div>
      <Upload {...prop} directory={false} showInfo={false} >
        <Button type="primary" style={{ marginLeft: '11.5em' }} icon={<UploadOutlined />}>上传文件</Button>
      </Upload>
      <div style={{ marginTop: '5px' }}>
        <span style={{ marginTop: '5px', marginLeft: '13em' }}>(请上传.ZIP)</span>
      </div>
    </div>

  )
}

export default connect(theProps, null)(Updata)
